<script type="text/javascript">
function changeinfo(index)
{
	if(index+2<10)
	{
	document.getElementById("img0").style.backgroundImage = "url('"+data[index+'3']+"')";
	document.getElementById("img1").style.backgroundImage =  "url('"+data[(index+1)+'3']+"')";
	document.getElementById("img2").style.backgroundImage =  "url('"+data[(index+2)+'3']+"')";
	document.getElementById("title0").innerHTML = data[index+'4'];
	document.getElementById("title1").innerHTML = data[(index+1)+'0'];
	document.getElementById("title2").innerHTML = data[(index+2)+'4'];
	document.getElementById("link0").href = data[index+'2'];
	document.getElementById("link1").href = data[(index+1)+'2'];
	document.getElementById("link2").href = data[(index+2)+'2'];
	 }
	 else if(index+2==10)
	 {
		document.getElementById("img0").style.backgroundImage = "url('"+data[index+'3']+"')";
	document.getElementById("img1").style.backgroundImage =  "url('"+data[(index+1)+'3']+"')";
	document.getElementById("img2").style.backgroundImage =  "url('"+data[0+'3']+"')";
	document.getElementById("title0").innerHTML = data[index+'4'];
	document.getElementById("title1").innerHTML = data[(index+1)+'0'];
	document.getElementById("title2").innerHTML = data[0+'4'];
	document.getElementById("link0").href = data[index+'2'];
	document.getElementById("link1").href = data[(index+1)+'2'];
	document.getElementById("link2").href = data[0+'2'];
	 }
	 else
	 {
	 document.getElementById("img0").style.backgroundImage = "url('"+data[index+'3']+"')";
	document.getElementById("img1").style.backgroundImage =  "url('"+data[0+'3']+"')";
	document.getElementById("img2").style.backgroundImage =  "url('"+data[1+'3']+"')";
	document.getElementById("title0").innerHTML = data[index+'4'];
	document.getElementById("title1").innerHTML = data[0+'0'];
	document.getElementById("title2").innerHTML = data[1+'4'];
	document.getElementById("link0").href = data[index+'2'];
	document.getElementById("link1").href = data[0+'2'];
	document.getElementById("link2").href = data[1+'2'];
	
	 }
	 cur=index;
}
var data=[];
{foreach from=$data item=post}
data[{$post.counter}+'0']='{$post.title}';
data[{$post.counter}+'1']='{$post.described}';
data[{$post.counter}+'2']='{$post.link}';
data[{$post.counter}+'3']='{$post.image}';
data[{$post.counter}+'4']='{$post.short_title}';
{/foreach}
</script>

<div class="slider-news">
	<ul>
		<li style="background:#fff;max-width:128px;"><a id="link0" href="{$data[0].link}">{php file='./image-crop.php?image='|cat:{$data[0].image}|cat:'&cropratio=128:250&width=128&height=250&id=img0&class=imgnews'}<div class="slider-news-title" style="max-width:128px;" id="title0">{$data[0].short_title}</div></a></li>
		<li style="background:#fff;max-width:380px;"><a  id="link1" href="{$data[1].link}">{php file='./image-crop.php?image='|cat:{$data[1].image}|cat:'&cropratio=380:250&width=380&height=250&id=img1&class=imgnews'}<div class="slider-news-title" style="max-width:380px;font-weight:bold;" id="title1">{$data[1].title}</div></a></li>
		<li style="padding-right:0px;max-width:128px;"><a id="link2" href="{$data[2].link}">{php file='./image-crop.php?image='|cat:{$data[2].image}|cat:'&cropratio=128:250&width=128&height=250&id=img2&class=imgnews'}<div class="slider-news-title" style="max-width:128px;" id="title2">{$data[2].short_title}</div></a></li>
		<li style="padding-right:0px;max-width:640px;"><img src='{_block code="bottom_slider"}' width="640px"></li>
	</ul>
</div>
<script>
	var time=7000;
	var cur=0;
	var max=10;
	var hover=0;
	setInterval(function(){
	if(hover==1) return;
		if(cur==max) cur=0; else cur+=1;
		changeinfo(cur);
	},time);
	$(".0").css("background","#3976a0");
	$(".p0").css("color","#f4db6e");
</script>